<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { requestEverydaySongRecom } from '../../utils/axiosURL'
import SongTable from '@components/common/songtable/index.vue'
import useSongURLStore from '../../store/songURL';

const songURLStore = useSongURLStore()
let clickIndexBK = ref<any>(null)
// 存储每日推荐歌曲信息
const getEveryDayList = reactive([])


// 每日推荐歌曲
const everydaySongRecom = () => {
    requestEverydaySongRecom().then(({ data }: any) => {
        localStorage.setItem("playList", JSON.stringify(data.dailySongs))
        songURLStore.initPlayList(data.dailySongs)
        getEveryDayList.values = data.dailySongs
    }).catch(err => {
        console.log(err);
    })
}

// 单击添加背景颜色
const clickHandleBK = (index: number) => {
    clickIndexBK.value = index
    console.log(index, clickIndexBK);
}

onMounted(() => {
    everydaySongRecom()
})


</script>


<template>
    <div class="songDetailWrap">
        <div class="topWrap">
            <div class="songListDetailTop">
                <div class="songlistLeft">
                    <span class="iconfont icon-rili"></span>
                    <span class="getDate">{{
                        new Date().getDate() <= 9 ? '0' + new Date().getDate() : new Date().getDate()
                    }}</span>
                </div>
                <div class="songlistRight">
                    <p class="dailyTiile">每日歌曲推荐</p>
                    <p class="dailyDesc">根据您的音乐口味生成, 每日6: 00更新</p>
                </div>
            </div>
            <div class="addPlay_songList">
                <div class="addplay">
                    <div class="addplay_Left">
                        <span class="iconfont icon-xiasanjiaoxing"></span>
                        <span>播放全部</span>
                    </div>
                    <div class="addSongList">
                        <span class="iconfont icon-jiahao"></span>
                    </div>
                </div>
                <div class="collectionAll">
                    <span class="iconfont icon-wj-wjj"></span>
                    <span>收藏全部</span>
                </div>
            </div>
        </div>
        <div class="btmWrap">
            <SongTable :songList=getEveryDayList.values />
        </div>

    </div>
</template>


<style lang="scss" scoped>
.songDetailWrap {
    width: 100%;
    height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 150px;

    .topWrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 170px;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid $lineColor;

        .songListDetailTop {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            flex-basis: 120px;

            .songlistLeft {
                flex-basis: 120px;

                .icon-rili {
                    font-size: 100px;
                    @include author_color('author_color');
                }

                .getDate {
                    position: absolute;
                    top: 37px;
                    left: 20px;
                    @include author_color('author_color');

                    font: {
                        size: 50px;
                        weight: bold;
                    }
                }
            }

            .songlistRight {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                flex: 1;

                .dailyTiile {
                    font-size: $font-size-lg2;
                    font-family: $activeTextFont;
                }

                .dailyDesc {
                    font-family: $textFont;
                    font-size: $font-size-sm;
                    margin-top: 4px;
                }
            }
        }

        .addPlay_songList {
            display: flex;
            align-items: center;
            flex: 1;

            .addplay {
                display: flex;
                width: 150px;
                height: 30px;
                margin-left: 10px;
                border-radius: 25px;
                overflow: hidden;
                @include background_color('bk_color');

                .addplay_Left {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-basis: 115px;
                    color: $theme-white;
                    font-family: $textFont;

                    .icon-xiasanjiaoxing {
                        transform: translateX(5px) rotate(-90deg);
                        font-size: 20px;
                    }

                    &:hover {
                        background-color: rgb(204, 50, 50);
                    }
                }

                .addSongList {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    color: $theme-white;

                    &:hover {
                        background-color: rgb(204, 50, 50);
                    }
                }

                &:hover {
                    cursor: pointer;
                    background-color: rgb(215, 53, 53);
                }
            }

            .collectionAll {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 120px;
                height: 30px;
                margin-left: 20px;
                border-radius: 25px;
                font-family: $textFont;
                color: gray;
                border: .2px solid rgb(206, 206, 206);

                span:nth-child(1) {
                    font-size: 20px;
                    margin-right: 4px;
                }

                &:hover {
                    background-color: rgb(242, 242, 242);
                    cursor: pointer;
                }
            }
        }
    }

    .btmWrap {
        width: 100%;
        padding-left: 1px;
        box-sizing: border-box;
    }
}


@media screen and (max-width: 1030px) {
    .songTitle {
        width: 175px;
    }
}
</style>
